<template>
  <div class="table_info_wrapper">
    <div class="table_item_wrapper">
      <div class="title_wrapper">
        <i class="point"></i>
        <span class="title_text">医院得分排名（今日）</span>
      </div>
      <el-table
        ref="leftTable"
        :data="tableData"
        style="width: 100%"
        height="327"
        tooltip-effect="light"
        highlight-current-row
        @current-change="handleCurrentChange">
        <el-table-column
          prop="rank"
          label="排名"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          label="较昨日"
          align="center"
          header-align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.rankIncrease > 0"
              class="up_text">
              {{ scope.row.rankIncrease }}
              <img src="@/assets/dataValidate/up_icon.png" class="table_icon"/>
            </span>
            <span
              v-else-if="scope.row.rankIncrease < 0"
              class="down_text">
              {{ scope.row.rankIncrease }}
              <img src="@/assets/dataValidate/down_icon.png" class="table_icon"/>
            </span>
            <span
              v-else
              class="up_text">
              ---
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orgName"
          label="医院名称"
          align="center"
          header-align="center"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="ruleScore"
          label="得分"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          prop="dataCount"
          label="总数据数"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          label="环比昨日"
          align="center"
          header-align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.countIncrease > 0"
              class="up_text">
              {{ scope.row.countIncrease.toFixed(2) }}
              <img src="@/assets/dataValidate/up_icon.png" class="table_icon"/>
            </span>
            <span
              v-else-if="scope.row.countIncrease < 0"
              class="down_text">
              {{ scope.row.countIncrease.toFixed(2) }}
              <img src="@/assets/dataValidate/down_icon.png" class="table_icon"/>
            </span>
            <span
              v-else
              class="up_text">
              ---
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="errorCount"
          label="异常数据"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          label="异常占比"
          align="center"
          header-align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.errorRatio">{{ (scope.row.errorRatio*100).toFixed(2) }}%</span>
            <span v-else>---</span>
          </template>
        </el-table-column>
        <el-table-column
          label="环比昨日"
          align="center"
          header-align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.errorRatioIncrease > 0"
              class="up_text">
              {{ scope.row.errorRatioIncrease.toFixed(2) }}
              <img src="@/assets/dataValidate/up_icon.png" class="table_icon"/>
            </span>
            <span
              v-else-if="scope.row.errorRatioIncrease < 0"
              class="down_text">
              {{ scope.row.errorRatioIncrease.toFixed(2) }}
              <img src="@/assets/dataValidate/down_icon.png" class="table_icon"/>
            </span>
            <span
              v-else
              class="up_text">
              ---
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table_item_wrapper">
      <div class="title_wrapper">
        <i class="point"></i>
        <span class="title_text">{{ currentRow.orgName }}规则得分情况</span>
      </div>
      <el-table
        :data="rightTableData"
        style="width: 100%"
        height="327"
        tooltip-effect="light">
        <el-table-column
          prop="ruleType"
          label="规则类型"
          align="center"
          header-align="center">
          <template slot-scope="record">
            {{ ruleTypeLabel[record.row.ruleType] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="fixedWeight"
          label="权重"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          prop="total"
          label="参与计算总数"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          prop="errorCount"
          label="异常数据数"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          prop="ruleScore"
          label="得分"
          align="center"
          header-align="center">
        </el-table-column>
        <el-table-column
          label=""
          align="center"
          header-align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetailPage(scope.row)">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { Table, TableColumn } from 'element-ui'
import { scoreRank, scoreDetailGroupByRuleType } from '@/api/home'
export default {
  props: {},
  data () {
    return {
      ruleTypeLabel: {
        1: '一致性',
        2: '完整性',
        3: '及时性',
        4: '规范性'
      },
      currentRow: {
        countIncrease: 0,
        dataCount: 0,
        errorCount: 0,
        errorCountIncrease: 0,
        errorRatio: 0,
        errorRatioIncrease: 0,
        orgId: '',
        orgName: '',
        rank: 1,
        rankIncrease: 0,
        ruleScore: 0,
        yesterdayDataCount: 0,
        yesterdayErrorCount: 0,
        yesterdayErrorRatio: 0,
        yesterdayRank: 0,
        yesterdayRuleScore: 0
      },
      tableData: [],
      rightTableData: []
    }
  },
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  },
  computed: {},
  watch: {},
  methods: {
    handleCurrentChange (val) {
      console.log(val)
      this.currentRow = val
      this.requestRightTableData()
    },
    toDetailPage (val) {
      console.log(val)
      this.$emit('showDetailPage', val)
    },
    requestLeftTableData () {
      scoreRank().then((res) => {
        console.log(res)
        this.tableData = res.data
        this.$refs.leftTable.setCurrentRow(res.data[0])
      }).catch((err) => {
        console.log(err)
      }).finally(() => {

      })
    },
    requestRightTableData () {
      scoreDetailGroupByRuleType({
        orgId: this.currentRow.orgId
      }).then((res) => {
        console.log(res)
        this.rightTableData = res.data
      }).catch((err) => {
        console.log(err)
      }).finally(() => {

      })
    }
  },
  created () {
    this.requestLeftTableData()
  },
  beforeMount () {},
  mounted () {},
  activated () {}
}
</script>

<style scoped lang="less">
.table_info_wrapper{
  width: 100%;
  height:397px;
  background:rgba(255,255,255,1);
  box-shadow:0px 3px 10px 0px rgba(95,122,151,0.13);
  border-radius:4px;
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  .table_item_wrapper{
    // flex: 1;
    width: 50%;
    border-right: 1px solid #EFF3F9;
    padding: 0 42px;
    overflow: hidden;
  }
  .table_item_wrapper:last-child{
    border-right: none;
  }

  .title_wrapper{
    height: 70px;
    display: flex;
    align-items: center;
  }
  .point{
    width:7px;
    height:7px;
    background:rgba(0,131,255,1);
    border-radius:50%;
  }
  .title_text{
    margin-left: 12px;
    font-size:16px;
    font-weight:bold;
    color:#666666;
  }

  .up_text{
    font-size:14px;
    font-weight:400;
    color:rgba(21,199,119,1);
  }
  .down_text{
    font-size:14px;
    font-weight:400;
    color:rgba(247,100,90,1);
  }
  .table_icon{
    width:10px;
    height:9px;
  }
}
</style>
<style lang="less">
.table_info_wrapper{
  .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
    display: none;
  }
  .el-button{
    padding: 0px;
  }
  .el-table th{
    background: #F9FBFD;
  }
}
</style>
